<template>
  <div :style="`--el-table-border:${isDark ? '1px solid rgba(246, 247, 251, 0.1);' : '1px solid #ebeef5'}`">
    <RePage>
      <el-space>
        <el-button type="primary" @click="getData">刷新</el-button>
        <!-- <sj-button type="primary" :icon="Refresh" @click="getData"></sj-button> -->
      </el-space>
      <div class="dorder-lt mt-5">
        <div class="flex justify-between">
          <div class="cell font-bold justify-center">名称</div>
          <div class="cell font-bold justify-center">操作</div>
        </div>
        <div v-for="(item, index) in tableData" :key="index">
          <div class=" ">
            <div class="flex justify-between cursor-pointer">
              <div @click="item.isClose = !item.isClose" class="cell">
                <div style="width: 16px;height: 16px;margin: auto 0;margin-left: 20px;">
                  <el-icon :style="!item.isClose ? 'transform: rotate(90deg);' : ''">
                    <ArrowRight />
                  </el-icon>
                </div>
                {{ isNullOrEmpty( item.group ) }}
              </div>
              <sj-link custom-type="sblue" :underline="false" @click="item.isClose = !item.isClose" class="cell">{{
                item.isClose ? '' : '' }}</sj-link>
              <!-- <sj-link custom-type="sblue" :underline="false" @click="item.isClose = !item.isClose" class="cell">{{
          item.isClose ? '展开' : '收起' }}</sj-link> -->

            </div>
            <div v-for="childItem in item.child" v-show="!item.isClose" class="flex justify-between">
              <div class="cell">
                <div style="width: 26px;height: 26px;margin: auto 0;margin-left: 20px;"></div> {{ isNullOrEmpty( childItem.name ) }}
              </div>
              <div class="cell justify-center">
                <sj-link class="mx-[5px]" type="primary" :underline="false" @click="info(childItem)">详情</sj-link>
                <sj-link class="mx-[5px]" custom-type="sblue" :underline="false" @click="edit(childItem)">编辑</sj-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </RePage>
    <!-- <seeting-edit ref="seetingEditRef" @update="confirm"></seeting-edit>
    <seeting-info ref="seetingInfoRef"></seeting-info> -->
  </div>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import seetingEdit from "./seeting-edit.vue";
import seetingInfo from "./seeting-info.vue";
import { getConfigList, getConfigInfo, saveConfigs } from '@/api/manage/system-management/system-settings/index'
import { onMounted, ref } from "vue";
import { ArrowRight, Refresh } from "@element-plus/icons-vue";
import { message } from "@/utils/message";
import RePage from "@/components/RePage/index.vue";
import { addDialog } from "@/components/ReDialog";
import { customDebounce, customPromiseDebounce } from "@/utils/functions";
import { cloneDeep, isAllEmpty, deviceDetection, debounce } from "@pureadmin/utils";
import { useDark } from "@pureadmin/utils";
const { isDark } = useDark();
const tableData = ref([])

const formRef = ref();

onMounted(() => {
  getData()
})
function getData() {
  getConfigList().then(res => {
    tableData.value = res.result.data
    tableData.value.forEach(item => {
      item.isClose = false
    })
  })
}
function edit(childItem) {
  addDialog({
    title: `编辑配置`,
    width: "800px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(seetingEdit, { ref: formRef }),
    openAutoFocus({ options, index }) {
      options.props = {
        isLoading: true,
        formInline: {
          aliass: {},
          details: {
            data: {},
            struct: {}
          }
        },
      }
      getConfigInfo({
        alias: childItem.alias
      }).then(res => {
        options.props.formInline.aliass = childItem.alias
        options.props.formInline.details = res.result
      }).finally(() => {
        options.props.isLoading = false
      })
    },
    beforeSure: (done, { options }) => {
      const formData = options.props.formInline;
      function chores() {
        message(`操作成功`, {
          type: "success"
        });
        done(); // 关闭弹框
        getData(); // 刷新列表
      }
      if (!options.props?.isLoading) {
        // console.log("formData", formData);
        // 表单规则校验通过
        options.props.isLoading = true;
        DebounceEditInfo({
          config: formData.details,
          alias: formData.aliass
        }).then(res => {
          if (res.code == 100) {
            chores();
          }
          options.props.isLoading = false;
        }).catch((err) => {
          if (err !== '请求中') {
            options.props.isLoading = false;
          }
        })
      }
    }
  });
}
function info(childItem) {
  addDialog({
    title: `配置详情`,
    hideFooter: true,
    width: "800px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(seetingInfo, { ref: formRef }),
    openAutoFocus({ options, index }) {
      options.props = {
        isLoading: true,
        formInline: {
          aliass: {},
          details: {
            data: {},
            struct: {}
          }
        },
      }
      getConfigInfo({
        alias: childItem.alias
      }).then(res => {
        options.props.formInline.aliass = childItem.alias
        options.props.formInline.details = res.result
      }).finally(() => {
        options.props.isLoading = false
      })
    },
  });

}


// 编辑请求
const DebounceEditInfo = customPromiseDebounce(saveConfigs, 1000, true);

</script>
<style scoped lang="scss">
.cell {
  padding: 5px 0;
  width: 50%;
  text-align: center;
  border: var(--el-table-border);
  border-top: 0;
  border-left: 0;
  display: flex;
  flex-direction: row;
}

.dorder-rb {
  border: var(--el-table-border);
  border-top: 0;
  border-left: 0;
}

.dorder-lt {
  border: var(--el-table-border);
  border-bottom: 0;
  border-right: 0;
}
</style>
